<template>
  <h6 style="color: crimson">系统管理--><a href="http://localhost:5173/user">用户管理</a>-->添加用户</h6>
  <el-form ref="AddFormRef" :inline="true" :model="addForm" class="demo-form-inline">

    <el-form-item label="用户登录名" prop="userAccount">
      <el-input v-model="addForm.userAccount" style="width: 240px" placeholder="用户登录名" clearable />
    </el-form-item>
    <el-form-item label="用户姓名" prop="userName">
      <el-input v-model="addForm.userName" style="width: 240px" placeholder="用户姓名" clearable />
    </el-form-item>
    <br/>
    <el-form-item label="归属部门" prop="departName">
      <el-select v-model="addForm.departName" placeholder="归属部门" style="width: 240px" clearable >
        <el-option
            v-for="item in departOptions.optionData"
            :key="item"
            :label="item"
            :value="item"
        />    </el-select>
    </el-form-item>

      <el-form-item label="用户密码" prop="userPassword">
        <el-input v-model="addForm.userPassword" style="width: 240px" placeholder="用户密码" clearable />
      </el-form-item>
    <br/>
    <el-form-item label="用户性别" prop="userGender">
      <el-select v-model="addForm.userGender" placeholder="用户性别" style="width: 240px" clearable  >
        <el-option :value="0" label="男性"/>
        <el-option :value="1" label="女性"/>
      </el-select>
    </el-form-item>
    <el-form-item label="用户状态" prop="userState">
      <el-select v-model="addForm.userState" placeholder="用户状态" style="width: 240px" clearable  >
        <el-option :value="0" label="正常"/>
        <el-option :value="1" label="禁用"/>
      </el-select>
    </el-form-item>
    <br/>
    <el-form-item label="用户职务" prop="posName">
      <el-select v-model="addForm.posName" placeholder="所有职务" style="width: 240px" clearable  >
        <el-option
            v-for="item in posOptions.optionData"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="手机号" prop="userPhone">
      <el-input v-model="addForm.userPhone" style="width: 240px" placeholder="手机号" clearable />
    </el-form-item>
    <br/>
    <el-form-item label="用户邮箱" prop="userEmail">
      <el-input v-model="addForm.userEmail" style="width: 240px" placeholder="用户邮箱" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="warning" @click="resetAll">重置</el-button>
      <el-button type="primary" @click="addUser">添加</el-button>
    </el-form-item>
  </el-form>

</template>

<script  setup>
import {ref,reactive,onMounted,getCurrentInstance} from "vue";
import axios from "@/plugins/axios.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const addForm = ref({
  userPassword:123,
  departName:null,
  userState:null,
  posName:null,
  roleName:null,
  userName:null,
  userAccount:null,
  userGender:null,
  pageSize:10,
  pageNum:0
});



const tableList =reactive({tableData:[],total:10})
const departOptions  =  reactive({optionData:[]})
const userStateOptions=  reactive({optionData:[]})
const posOptions=  reactive({optionData:[]})
const roleOptions=  reactive({optionData:[]})
const userGenderOptions=  reactive({optionData:[]})
const resetAll = () => {
  addForm.value.userAccount=null
  addForm.value.userPassword=123
  addForm.value.userName=null
  addForm.value.departName=null
  addForm.value.userState=null
  addForm.value.posName=null
  addForm.value.roleName=null
  addForm.value.userGender=null
  addForm.value.userPhone=null
  addForm.value.userEmail=null
};
const addUser = () => {
  console.log(addForm.value);

  axios.postJson("/user/add",addForm.value).then( res=>{
    tableList.tableData=res.data
  })
  router.push("/user")

};

onMounted(()=>{
      axios.get("user/query").then(res=>{
        if(res.code===200){
          tableList.tableData=res.data
        }
      })
      axios.get("/user/paramList").then(res=>{
        if(res.code===200){
          console.log(res.data)
          departOptions.optionData=res.data.departName
          userStateOptions.optionData=res.data.userState
          posOptions.optionData=res.data.posName
          roleOptions.optionData=res.data.roleName
        }
      })
      axios.get("/user/getTatol").then( res=>{
        tableList.total=res.data
      })
    }
)
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>